<template>
    <layout title="转盘抽奖" :showD="false" :showBack="true" :showHome="false">
    <div class="bgc">
    <div class="round_box" >
     <img class="img_rotate" ref="rotImg" src="@/images/hall/zhuan.jpg" alt="">
     <div class="center">
     <div class="pointer" ></div>
     </div>
    </div>
<!-- 
    <van-button type="primary" text="点击抽奖"  @click="toDraw" />
   <van-overlay :show="show" @click="show = false" >
    <div class="wrapper" >
    <div class="block"></div>
   </div>
</van-overlay> -->
    <button @click="toDraw" ><span>点击抽奖</span></button>
    </div>
    <div class="tixian">
      <img src="@/images/hall/tixian.jpg" alt="">
    </div>
</layout>
   </template>
   
   <script>
   export default {
    name:'rotaryDraw',
    data() {
    return {
     show: false,
     rotate: 0,
     resetRotate: 0,
     hitId: 1,// 1-10
     drawStatus: false,
     msg:''
    }
    },
    async mounted() {
    await this.$nextTick();
    let evenTransition = this.whichTransitionEvent();
    let img = this.$refs.rotImg;
    let that = this;
    const hitAre = [ '30M流量包','20金币','20M流量包','10M流量包','5金币',
       '谢谢参与','10金币','50M流量包','2金币','100M流量包'
      ];
    // 监听 动画结束 
    img.addEventListener(evenTransition,tranHand,false);
   
    function tranHand() {
     // 复位
     that.resetRotate = that.rotate > 360 ? that.rotate % 360 : 0;
     img.style.transition = "none 0s ease 0s";
     img.style.transform = `rotate(${that.resetRotate}deg)`;
     alert(`抽奖结果【 ${hitAre[that.hitId - 1]} 】`);
     that.drawStatus = false
    }
    },
    methods: {
    start() {
     this.$refs.rotImg.style.transition = "all 3s ease 0s";
     this.$refs.rotImg.style.transform = `rotate(${this.rotate}deg)`;
    },
    toDraw() {
        
      // setTimeout(()=>{
      //       this.show = true
      //       this.msg
      //       console.log(this.msg);
      //   },3500)

        if(this.drawStatus){
     console.log('正在抽奖中');
     return
     }
     // 标记状态
     this.drawStatus = true
     /**
     * 圆盘共 10 份 每份 36度, 停位置(id)度数 (id - 1)*36 
     * 基数 3圈 360*4
     * this.rotate 当前角度
     * **/ 
     let reset = 360 * 4;
     let idx = this.getRandomInt(1,11);
     // 设置命中
     this.hitId = idx;
     // 需要多转角度
     let addRotate = this.resetRotate > 0 ? 360 - this.resetRotate : 0;
     // 总共角度
     let allRotate = this.rotate + (idx - 1) * 36 + reset + addRotate;
     // 角度限制
     this.rotate = this.setRotate(allRotate);
   
     this.start()
    },
    // 递归计算角度 不超过 360*6
    setRotate(deg) {
     let rest = deg - 360;
     return rest > 360*6 ? this.setRotate(rest) : deg;
    },
    getRandomInt(min, max) {
     // 向上收
     min = Math.ceil(min);
     // 向下收
     max = Math.floor(max);
     return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
    },
    // 动画兼容
    whichTransitionEvent(){
     let el = document.createElement('span'),
     transitions = {
     'transition':'transitionend',
     'OTransition':'oTransitionEnd',
     'MozTransition':'transitionend',
     'WebkitTransition':'webkitTransitionEnd'
     };
     for(let t in transitions){
     if( el.style[t] !== undefined ){
      return transitions[t];
     }
     }
     el = null;
    }
    }
   
   }
   </script>
   
   <style lang="less" scoped>
    .tixian{
      width: 100%;
      height: 100%;
      img{
        width: 100%;
      }
    }
      .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: rgb(253, 252, 252);
  } 
    .bgc{
        padding-top: 20px;
        padding-bottom:30px ;
        background: #fff4d6;
    }
    button{
        position: relative;
        left:45px;
        width: 300px;
        height: 60px;
        background: red;
         border: none;
         border-radius: 30px;
         span{
            color: #fff;
         }
    }
   .img_rotate{
    transform: rotate(0deg);
   }
   .round_box{
    background: rgb(252, 250, 250);
    width: 100%;
    max-width: 350x;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    img{
    position: relative;
    left: 0px;
    top:12px;
    width: 100%;
    margin-bottom:15px ;
    }
    .center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    .pointer{
     width: 5px;
     height: 90px;
     background-color: #f40;
     position: absolute;
     top: -90px;
    }
    .pointer::before{
     content:'';
     width: 0;
     height: 0;
     border-top: 15px solid transparent;
     border-right: 15px solid transparent;
     border-bottom: 15px solid #f40;
     border-left: 15px solid transparent;
     position: absolute;
     top: -20px;
     left: 50%;
     transform: translateX(-50%);
    }
    }
   }
   
   </style>